<template>
	<view>
		<view>
			<view class="item">
				<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
					<u-icon name="order" color="#1573FF" label="退款" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
					</u-icon>
				</view>
				<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
				<view class="content">
					<view class="text-line">
						<text class="text-name">退款单号:</text>
						<text class="text-value">{{model.refundNo|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">退款类型:</text>
						<text class="text-value">{{model.refundType}}</text>
					</view>
				</view>
				<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
					<u-icon name="order" color="#1573FF" label="退车结算费用明细" label-color="#333333" :customStyle="{'line-height': '80rpx',}">
					</u-icon>
					<text style="line-height: 80rpx; color: #FFC500;">实退款金额:{{model.actualRefund|filterNull}}</text>
				</view>
				<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
				<view class="content">
					<view class="text-line" v-for="(item,index) in model.feeItemEntities" :key="index">
						<text class="text-name">{{item.feeItemName}}:</text>
						<text class="text-value">{{item.feeItemValue|filterNull}}</text>
					</view>
				</view>
			</view>
			<view class="item" style="padding: 20rpx;">
				<u-form class="item" :model="maintenance" ref="uform" label-width="auto">
					<u-form-item label="退款方式" required="true" borderBottom @click="typeshow=true">
						<u-input v-model="maintenance.refundWayStr" inputAlign="right" placeholder="请选择退款方式" disabled
							disabledColor="#ffffff" border="none"></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="备注" borderBottom>
						<u-input v-model="maintenance.desc" border="none" inputAlign="right"
							placeholder="请输入备注">
						</u-input>
					</u-form-item>

					<text style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">退款凭证</text>

					<lr-upload @on-change='onListChange' :tag="1" :objType="20"></lr-upload>
				</u-form>
			</view>
			<u-modal ref="uModal" :show="showModal" :show-cancel-button="true" show-title="" @confirm="confirm" @cancel="showModal=false"
				content="确定提交？">
			</u-modal>
		</view>
		<!-- 类型 -->
		<u-picker :show="typeshow" :columns="refundWay" keyName="name" @confirm="typeConfirm" @cancel="typeshow=false"></u-picker>
		<view style="height: 100rpx;"></view>
		<view class="button-container">
			<button class="btn-item" @click="commit">提 交</button>
		</view>
	</view>
</template>

<script>
	import lrUpload from '../../components/global/lr-upload.vue';
	export default {
		components: {
			lrUpload,
		},

		data() {
			return {
				refundWay: [[{
					code:1,
					name:'余额'
				},
				{
					code:2,
					name:'银行卡'
				},
				{
					code:3,
					name:'支付宝'
				},
				{
					code:4,
					name:'微信'
				},
				{
					code:5,
					name:'现金'
				},
				{
					code:6,
					name:'其他'
				}]],
				model:{},
				typeshow:false,
				maintenance: {
					refundWay: null,
					refundWayStr:'',
					refundId:'',
					desc: '',
					attachment: [],
				}
			}
		},
		onLoad(op) {
			this.maintenance.refundId = op.id;
			this.$u.api.refundwarnSubmitDetail({
				shouldRefundId: op.id
			}).then(
				res => {
					this.model = res;
				}
			);
		},
		methods: {
			typeConfirm(e){
				this.typeshow = false
				this.maintenance.refundWay = e.value[0].code
				this.maintenance.refundWayStr = e.value[0].name
			},
			commit() {
				let that = this
				if(!that.maintenance.refundWay){
					that.$u.toast('退款方式不能为空');
					return false;
				}
				uni.showModal({
				    content: '确定提交吗?',
				    success(result) {
				       if (result.confirm) {
							that.confirm()				
				       }
				    }
				})
			},
			confirm() {
				this.$u.api.saveShouldRefund(this.maintenance).then(
					res => {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						});
						let pages = getCurrentPages();
						let prevPage = pages[pages.length - 2]; //上一页页面实例
						prevPage.$vm.reload()
						setTimeout(()=>{
							uni.navigateBack();
						}, 1000)
					}
				);
			},
			onListChange(tag, list, objList) {
				if (tag == 1) {
					this.maintenance.attachment = objList;
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.bottom {
		position: fixed;
		width: 100%;
		height: 100rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			width: 98%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx;
	}
	.content{
		padding:12rpx;
		box-sizing: border-box;
	}
	.nodata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
		image {
			width: 200rpx;
			height: 100rpx;
		}
	
		text {
			margin-top: 35rpx;
			margin-bottom: 60rpx;
			font-size: 24rpx;
			color: #C5D3E8;
		}
	}
</style>
